<template>
  <div class="vuex-demo">
    <!-- <div>{{ userName }}</div>
    <div>{{ countResult }}</div>
    <div>{{ doneCount }}</div> -->
    <el-button @click="changeCount">Count1++</el-button>
    <div style="color: red">{{ count1 }}</div>
    <!-- <div style="color: red">{{ count2 }}</div>
    <el-button @click="changeCount">Count1++</el-button>
    <el-button @click="changeCountAsync">AsyncCount1++</el-button>
    <el-button @click="changeUserName">changeUserName</el-button> -->
  </div>
</template>

<script type="text/javascript">
//import HelloWorld from '@/components/HelloWorld.vue'
import { mapState } from 'vuex'
export default {
  name: "VuexDemo",
  components: {},
  data() {
    return {
      initNumber: 10
    }
  },
  created() {

  },
  computed: {
    ...mapState(['count1']),
    // ...mapState('userStore',['userName']),
    // // ...mapGetters(['countResult']),
    // ...mapGetters({
    //   countResult: 'countResult',
    //   doneCount: 'userStore/getterUserName'
    // }),
    // customComputed() {
    //   return this.initNumber + this.count1
    // }

  },
  methods: {
    // ...mapMutations(['increment']),
    // // ...mapMutations('useStore',['setUserName']),
    // ...mapMutations({
    //   cusSetUserName: 'userStore/setUserName'
    // }),
    // ...mapActions(['incrementAsync']),
    changeUserName() {
      this.cusSetUserName('张学友')
    },
    changeCount() {
      this.$store.state.count1 += 10
    },
    changeCountAsync() {
      console.log(111)
      this.incrementAsync(11)
    }
  }
}
</script>

<style lang="scss" scoped></style>